<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer" />
    <title>Document</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="scripts/template-web.js"></script>
</head>
<style>
    .container img {
        margin: 20px auto;
        height: 240px;
    }
	.panel-body {
		padding: 0;
	}
</style>

<body>
    <p></p>
    <div class="container">
        <div class="row" id="movies-wrapper">
            
        </div>
    </div>
    <p class="text-center">
        <a id="loadmoreBtn" class="btn btn-primary btn-lg">加载更多</a>
    </p>
    <!--模态窗口-->
    <div id="myModal" class="modal fade bs-example-modal-lg">
        <div class="modal-dialog modal-lg">
            <div class="modal-content" id="modal-wrap">

            </div>
        </div>
    </div>
</body>

<!-- 电影海报列表模板 -->
<script id="movie-temp" type="text/html">
    <% for(var i=0; i<list.length; i++) { %>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
		<div class="panel panel-default">
			<div class="panel-body text-center">
				<img movieid=<%=list[i].id%> src="<%=list[i].images.small %>" class="img-thumbnail">
			</div>
			<div class="panel-footer"> 《<%=list[i].title%>》 </div>
		</div>
    </div>
    <% } %>
</script>

<!-- 电影详情模板 -->
<script id="movie-detail" type="text/html">
    <div class="container-fluid">
        <h2>
            <p class="text-center"><%=title%> <%=original_title%> <span class="text-muted">(<%=year%>)</span></p>
        </h2>
        <div class="col-xs-3">
            <img src="<%=images.small%>" class="img-thumbnail" />
        </div>	
        <div class="col-xs-6">
            <p>
                <span class="text-muted">导演:</span>
                <% for(var i=0; i<directors.length; i++) { %>
                    <a href="<%=directors[i].alt%>"><%=directors[i].name%></a>
                <% } %>
            </p>
            <p>
                <span class="text-muted">主演:</span>
                <% for(var i=0; i<casts.length; i++) { %>
                        <a href="<%=casts[i].alt%>"><%=casts[i].name%></a> 
                        <% if(i<casts.length-1) {%> / <% }%>
                <% } %>
            </p>
            <p>
                <span class="text-muted">类型:</span> 
				<% for(var i=0; i<genres.length; i++) { %>
				        <%=genres[i] %> 
						<% if(i!=genres.length-1) {%> / <% }%>
				<% } %>
            </p>
            <p>
                <span class="text-muted">制片国家/地区:</span> 美国
            </p>
            <p>
                <span class="text-muted">语言:</span> 英语 / 法语
            </p>
            <p>
                <span class="text-muted">上映日期:</span> 2018-08-31(中国大陆) / 2018-07-27(美国)
            </p>
            <p>
                <span class="text-muted">片长:</span> 147分钟 / 148分钟(中国大陆)
            </p>
        </div>	
        <div class="col-xs-3" style="border-left: solid 1px #bbb ">
            <p class="text-muted">豆瓣评分</p>
            <div class="row">
                <div class="col-xs-4">
                    <span style="font-size: 20px;"><%=rating.average%></span>	
                </div>
                <div class="col-xs-8">
                    <span class="text-warning glyphicon glyphicon-star"></span>
                    <span class="text-warning glyphicon glyphicon-star"></span>
                    <span class="text-warning glyphicon glyphicon-star"></span>
                    <span class="text-warning glyphicon glyphicon-star"></span><br>
                    <span>156333人评价</span>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-3">
                    <span class="text-muted">5星</span>
                </div>
                <div class="col-xs-9">
                    <div class="progress" style="margin-bottom: 5px">
                        <div class="progress-bar progress-bar-warning" style="width: 32%">32% </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-3">
                    <span class="text-muted">4星</span>
                </div>
                <div class="col-xs-9">
                    <div class="progress" style="margin-bottom: 5px">
                        <div class="progress-bar progress-bar-warning" style="width: 50%">50% </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-3">
                    <span class="text-muted">3星</span>
                </div>
                <div class="col-xs-9">
                    <div class="progress" style="margin-bottom: 5px">
                        <div class="progress-bar progress-bar-warning" style="width: 16%">16% </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-3">
                    <span class="text-muted">2星</span>
                </div>
                <div class="col-xs-9">
                    <div class="progress" style="margin-bottom: 5px">
                        <div class="progress-bar progress-bar-warning" style="width: 1%">1% </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-3">
                    <span class="text-muted">1星</span>
                </div>
                <div class="col-xs-9">
                    <div class="progress" style="margin-bottom: 5px">
                        <div class="progress-bar progress-bar-warning" style="width: 0.5%">0.5% </div>
                    </div>
                </div>
            </div>
        </div>	
    </div>
    <p>
        
            
    </p>

</script>

<script>


    //map用来做缓存，速度比较快
    let moviesCache = new Map();


    $(function(){
        var start = 0;

        $("#loadmoreBtn").click(function(){
            $.ajax({
                url : "http://localhost:9090/proxy/api.douban.com/v2/movie/in_theaters?count=6&start="+start, 
                dataType: "json",
                success : function(data){
                    
                    let movies = data.subjects;
					movies.map(m=>{
						moviesCache.set(m.id, m);
					})
					let tempstr = template("movie-temp", { list : movies });
					$("#movies-wrapper").append(tempstr);
					
					start += 6;
                }
            });
        })
        $("#movies-wrapper").on("click", "img", function(){

            
            let movie = moviesCache.get( this.getAttribute('movieid') );
            let tempstr = template("movie-detail", movie);
            
            $("#modal-wrap").html( tempstr );
            
            $("#myModal").modal("show");
            // console.log(movie);
            
        })
    })
</script>
</html>